<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template slot="filter-content">

      <el-select v-model="listQuery.params.openType" class="filter-item" placeholder="开放类型" clearable>
        <el-option
          v-for="item in openTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="listQuery.params.startTime"
        class="filter-item"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="考试开始时间"
      />

      <el-date-picker
        v-model="listQuery.params.endTime"
        class="filter-item"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="考试结束时间"
      />

      <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" class="filter-item" />
      
      

    </template>

    <template slot="data-columns">

      <el-table-column
        label="考试名称"
        prop="title"
      />

      <el-table-column
        label="考试类型"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.openType | examOpenType }}
        </template>

      </el-table-column>

      <el-table-column
        label="考试时间"
        width="220px"
        align="center"
      >

        <template slot-scope="scope">
          <span v-if="scope.row.timeLimit">
            {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
          </span>
          <span v-else>不限时</span>
        </template>

      </el-table-column>

      <el-table-column
        label="考试总分"
        prop="totalScore"
        align="center"
      />

      <el-table-column
        label="及格线"
        prop="qualifyScore"
        align="center"
      />

      <el-table-column
        label="状态"
        align="center"
      >

        <template slot-scope="scope">
          {{ scope.row.state | stateFilter }}
        </template>

      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="220px"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdateExam(scope.row.id)">修改</el-button>
          <el-button type="warning" size="mini" icon="el-icon-user" @click="handleExamDetail(scope.row.id)">考试详情</el-button>
          <el-button type="primary" size="mini" icon="el-icon-Grid" @click="payQR(scope.row.id)" style="margin-top: 10px">生成二维码</el-button>
        </template>
      </el-table-column>
    </template>

    <template slot="qrCode">
      <el-dialog title="扫码开始考试" :visible="qrCodeVisible" width="27%" :append-to-body="true" >
        <!-- 二维码图片 -->
        <!-- <div id="qrCodeUrl"></div> -->
        <div class="qrCode">
          <vue-qr :logoSrc="imageUrl" :text="text" :size="200"></vue-qr>
        </div>
        <!-- 取消按钮 -->
        <template  #footer>
          <span class="dialog-footer">
            <el-button @click="qrCodeVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </template>
      
  </data-table>
  
</template>

<script>
import DataTable from '@/components/DataTable'
import QRCode from 'qrcodejs2'
import vueQr from "vue-qr"



export default {
  name: 'ExamList',
  components: { DataTable,vueQr },
  data() {
    return {
      text: '1',
      imageUrl: require('@/icons/logo.png'),
      qrCodeVisible: false, // 二维码弹框
      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '指定部门'
        }
      ],

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        // 可批量操作
        multi: true,
        // 批量操作列表
        multiActions: [
          {
            value: 'delete',
            label: '删除'
          }, {
            value: 'enable',
            label: '启用'
          },
          {
            value: 'disable',
            label: '禁用'
          }
        ],
        // 列表请求URL
        listUrl: '/exam/api/exam/exam/paging',
        // 删除请求URL
        deleteUrl: '/exam/api/exam/exam/delete',
        // 删除请求URL
        stateUrl: '/exam/api/exam/exam/state',
        addRoute: 'AddExam',
      }
    }
  },
  methods: {

    //展示弹窗及二维码
    payQR(examId) {
      //显示弹窗
      this.qrCodeVisible = true;
      //使用$nextTick确保数据渲染（这个方法表示页面的结构一定已经生成好了，这个时候就可以调用节点生成二维码）
      this.$nextTick(() => {
          //生成二维码的方法
          this.qrCodeGeneration(examId);
      });
    },

    handleExamDetail(examId) {
      this.$router.push({ name: 'ListExamUser', params: { examId: examId }})
    },

    handleUpdateExam(examId) {
      this.$router.push({ name: 'UpdateExam', params: { id: examId }})
    },
    // 二维码生成
    qrCodeGeneration(examId) {
      // 二维码弹框显示
      this.qrCodeVisible = true;
      this.text = examId
      生成二维码
      this.$nextTick(() => {
          let qrCodeUrl= new QRCode(this.$refs.qrCodeUrl, {
              width: 200,
              height: 200,
              text: examId,
              correctLevel: QRCode.CorrectLevel.H,
          });
      });
    }
  }
}
</script>
<style>

.el-dialog__header {
  text-align: center;
}
 
/* #qrCodeUrl > img {
  margin: 0 auto;
} */

.qrCode{
  margin-left: 135px;
}
</style>
